<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>咸阳市红色资源体验平台</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/jquery/jquery.min.js"></script>
    <style>
        .register-settings {
            width: 570px;
            height: 370px;
            border: solid 1px white;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: rgb(230, 230, 230, 0.3);
        }
        #register-view {
            width: 570px;
            height: 370px;
        }

        body {
            background-image: url(../icon/background.jpeg);
            background-size: cover;
            width: 570px;
            height: 370px;
        }
        .register-title {
            font-size: 25px;
            width: 540px;
            text-align: center;
            margin-top: 30px;
            margin-bottom: 20px;
            color: cornflowerblue;
        }
        .layui-input {
            width: 300px;
            margin-bottom: -10px;
            height: 38px;
            border: white;
            opacity: 0.7;

        }
        .layui-input-safe {
            opacity: 0.7;
            width: 215px;
            margin-left: 0px;
            height: 38px;
            border: white;
            margin-bottom: -10px;
        }
        #captchaImage {
            position: absolute;
            left: 15px;
        }
        #register-success {
            width: 148px;
            height: 20px;
            color: white;
            border: cornflowerblue;
            background-color: cornflowerblue;
            line-height: 20px;
            margin-left: 110px;
            opacity: 0.7;
        }
        .back-to-login {
            position: absolute;
            width: 148px;
            color: white;
            text-align: center;

            background-color: cornflowerblue;
            left: 285px;
            bottom: 40px;
            opacity: 0.7;
        }

    </style>
</head>
<body class="layui-layout-body" style="background-color: #F2F2F2; height: 100%; width: 100%; ">
<div class="layui-container register-settings" >
                <div class="layui-form layui-tab-content" id="register-view">
                    <div class="layui-tab-item layui-show">
                        <div class="register-title">用户注册</div>
                            <form method="post">
                                <div class="layui-form-item">
                                    <label class="layui-form-label"></label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="username" id="username" required lay-verify="required|username"
                                               lay-reqtext="用户名是必填项，不能为空" placeholder="用户名（请输入4-12位字母或数字）" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label"></label>
                                    <div class="layui-input-inline">
                                        <input type="password" name="password" id="password" required lay-verify="required|password"
                                               lay-reqtext="密码是必填项，不能为空" placeholder="用户密码" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label"></label>
                                    <div class="layui-input-inline">
                                        <input type="password" name="confirmPassword" id="confirmPassword" required lay-verify="required"
                                               lay-reqtext="确认密码是必填项，不能为空" placeholder="确认密码" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label"></label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="email" id="email" required lay-verify="required|email"
                                               lay-reqtext="邮箱是必填项，不能为空" placeholder="邮箱" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label"></label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="identifyCode" id="identifyCode"  required lay-verify="required"
                                               lay-reqtext="验证码是必填项，不能为空" placeholder="验证码" autocomplete="off"
                                               class="layui-input-safe">
                                    </div>
                                    <div class="layui-form-mid" style="padding: 0!important;">
                                        <img id="captchaImage" src="/mausoleum/user/changeCode" style="height: 38px;width: 85px;"/>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <button id="register-success" class="layui-btn" lay-submit lay-filter="register_submit">提交</button>
                                    <a href="/mausoleum/html/login.html"><div class="back-to-login">去登录</div></a>
                                </div>
                            </form>
                    </div>
                </div>

</div>
<script>
    $("#captchaImage").attr("src", "/mausoleum/user/changeCode?timestamp=" + (new Date()).valueOf());
    $('#captchaImage').click(function () {
        $("#captchaImage").attr("src", "/mausoleum/user/changeCode?timestamp=" + (new Date()).valueOf());
    });
    layui.use('form', function () {
        var form = layui.form, layer = layui.layer;
        form.verify({
            username: [
                /^[a-zA-Z0-9_]{4,12}$/,
                '用户名必须由【4到12位】的【字母或数字】组成，不能出现空格'
            ],
            password: [
                /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{6,20}$/,
                '密码必须由【6到20位】的【字母和数字】组成，不能出现空格'
            ]
        });

        //监听提交
        form.on('submit(register_submit)', function (data) {
            if (data.field.password != data.field.confirmPassword) {
                layer.msg('请再次确认密码是否一致', {icon: 5, anim: 6});
                return false;
            }
            var url = '/mausoleum/user/register';
            $.post(url, {
                username: data.field.username,
                password: data.field.password,
                email: data.field.email,
                identifyCode: data.field.identifyCode,
                role: 1
            }, function (result) {
                console.log(result)
                if (result.code == 0) {
                    layer.msg('注册成功', {icon: 6});
                } else {
                    layer.msg(result.msg, {icon: 5, anim: 6});
                }
                $("#captchaImage").attr("src", "/mausoleum/user/changeCode?timestamp=" + (new Date()).valueOf());
            });
            return false;
        });
    });
</script>
</body>
</html>